<template>
  <div class="register-background">
    <el-card
      :body-style="{ padding: '0px' }"
      shadow="always"
      class="register-layout"
    >
      <el-row>
        <el-container>
          <el-col class="hidden-xs-only" :sm="8" :md="12" :lg="12" :xl="12">
            <el-aside width="100%">校园疫情管理系统</el-aside>
          </el-col>
          <el-col :xs="24" :sm="16" :md="12" :lg="12" :xl="12">
            <el-main width="100%">
              <div class="register_title">注册</div>
              <el-card shadow="always" class="register-form">
                <el-form
                  ref="userFormRef"
                  :model="user"
                  labelPosition="top"
                  :rules="rules"
                  status-icon
                  label-width=".625rem"
                  class="demo-ruleForm"
                >
                  <el-form-item label="用户名" prop="username">
                    <el-input
                      v-model.trim="user.username"
                      type="text"
                      clearable
                      placeholder="请输入用户名"
                      style="width: 50%"
                      @keyup.enter="register()"
                    />
                  </el-form-item>

                  <el-form-item prop="nickname" label="昵称">
                    <el-input
                      v-model.trim="user.nickname"
                      placeholder="请输入昵称"
                      @keyup.enter="register()"
                      type="text"
                  /></el-form-item>
                  <el-form-item prop="email" label="邮箱">
                    <el-input
                      v-model.trim="user.email"
                      placeholder="请输入邮箱"
                      @keyup.enter="register()"
                  /></el-form-item>

                  <el-form-item label="密码" prop="password">
                    <el-input
                      v-model.trim="user.password"
                      type="password"
                      show-password
                      placeholder="请输入密码"
                      clearable
                      @keyup.enter="register()"
                    />
                  </el-form-item>

                  <el-form-item label="确认密码" prop="checkPass">
                    <el-input
                      v-model.trim="user.checkPass"
                      type="password"
                      show-password
                      placeholder="请再次输入密码"
                      clearable
                      @keyup.enter="register()"
                    />
                  </el-form-item>

                  <el-form-item>
                    <el-button
                      type="primary"
                      class="submit_button"
                      @click="register()"
                      >注册</el-button
                    >
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      class="submit_button"
                      @click="$router.push('/login')"
                      >返回登录</el-button
                    >
                  </el-form-item>
                </el-form>
              </el-card>
            </el-main>
          </el-col>
        </el-container></el-row
      >
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    //ref
    return {
      //对象
      user: {
        username: '',
        password: '',
        checkPass: '',
        email: '',
        nickname: ''
      },

      rules: {
        username: [
          {
            //必填项
            required: true,
            message: '请输入用户名',
            // 失去焦点
            trigger: 'blur'
          },
          {
            //最小最大值
            min: 3,
            max: 10,
            message: '长度至少3~10个字符',
            trigger: 'blur'
          }
        ],
        password: [
          {
            //必填项
            required: true,
            message: '请输入密码',
            // 失去焦点
            trigger: 'blur'
          },
          {
            //最小最大值
            min: 6,
            max: 12,
            message: '长度至少6~12个字符',
            trigger: 'blur'
          }
        ],
        checkPass: [
          {
            //必填项
            required: true,
            message: '请再次输入密码',
            // 失去焦点
            trigger: 'blur'
          },
          {
            //最小最大值
            min: 6,
            max: 12,
            message: '长度至少6~12个字符',
            trigger: 'blur'
          }
        ],
        email: [
          // {
          //   required: true,
          //   message: '请输入邮箱地址',
          //   trigger: 'blur'
          // },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        nickname: [
          // {
          //   required: true,
          //   message: '请输入昵称',
          //   trigger: 'blur'
          // },
          {
            //最小最大值
            min: 3,
            max: 12,
            message: '长度至少3~12个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },

  methods: {
    register() {
      this.$refs['userFormRef'].validate((valid) => {
        if (valid) {
          if (this.user.password != this.user.checkPass) {
            this.$message.error('两次密码不一致')
            return false
          }
          console.log('注册验证中')
          // 表单校验合法
          this.$http.post('/user/register', this.user).then((res) => {
            console.log(JSON.stringify(res.data))
            if (res.status === '200') {
              // 本地存储:存储字符串 JSON.stringify 对象-》字符串
              this.$message.success('注册成功')
              this.$router.push('/login')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.register-background {
  height: 100vh;
  // background: url(@/assets/img/login-bg2.jpg) no-repeat;
  background-size: cover;
  background-color: rgb(64, 76, 105);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  .el-card {
    border: transparent;
    border-radius: 20px;
  }
  .register-layout {
    background-color: #fff;
    width: 95%;
    .el-aside,
    .el-main {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-aside {
      background-color: rgb(53, 62, 84);
      font-size: 0.625rem;
      color: #fff;
    }
    .el-main {
      padding: 0;
      display: flex;
      flex-direction: column;

      .register_title {
        font-size: 30px;
        font-weight: 800;
      }
      .register-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        // align-items: center;
        width: 70%;
        .el-form {
          .submit_button {
            width: 100%;
            height: 40px;
          }
        }
        //   输入框
        /deep/ .el-form-item__content {
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        /deep/ .el-input {
          height: 100%;
        }
      }
    }
  }
}
</style>